<template>
    <div>
        <Row>
            <Col span="24" style="text-align: center;margin-bottom: 2em">
            <i-col :sm="{ span: 2 }" style="display:inline-block;margin:0 2em;float:none" v-if="hasPermission('MenuService.create')">
                <Button type="info" icon="plus" @click="addMenu">新增</Button>
            </i-col>
            <i-col :sm="{ span: 2 }" style="display:inline-block;margin:0 2em;float:none">
                <Button type="info" icon="search" @click="queryMenu">搜索</Button>
            </i-col>
            </col>
        </Row>
        <row>
            <Table :context="self" :data="sourceData" :size="tablesize" :columns="cols"></Table>
        </row>
        <row style="float: right; margin:1em 0">
            <Page :total="totalRecord" :current="pageNo" :page-size-opts=[10,50,100] show-elevator show-sizer show-total @on-change="onPageIndexChange" @on-page-size-change="onPageSizeChange"></Page>
        </row>
        <Modal ref="modal" v-model="modal" title="类型" @on-ok="ok" @on-cancel="cancel">
            <Form :label-width="80">
                <row>
                    <template>
                        <Form :label-width="80">
                            <Form-item>
                                <Radio-group v-model="type" @on-change="parentMenuChange">
                                    <Radio label="目录"></Radio>
                                    <Radio label="菜单"></Radio>
                                </Radio-group>
                            </Form-item>
                        </Form>
                    </template>
                </row>
                <Form :model="MenuVO" :rules="ruleValidate" :label-width="80" ref="MenuForm">
                    <Form-item label="菜单名称" prop="menuName">
                        <Input v-model="MenuVO.menuName"></Input>
                    </Form-item>
                    <Form-item v-if="type == '目录'" label="上级菜单" prop="parentMenuId">
                        <Input readonly v-model="MenuVO.title" style="width: 348px"></Input>
                        <Button type="primary" @click="choose">选择</Button>
                    </Form-item>
                    <Form-item v-if="type == '菜单'" label="上级菜单" prop="parentMenuId">
                        <Input readonly v-model="MenuVO.title" style="width: 348px"></Input>
                        <Button type="primary" @click="choose">选择</Button>
                    </Form-item>
                    <Form-item v-if="type == '菜单'" label="菜单URL" prop="menuUrl">
                        <Input v-model="MenuVO.menuUrl" placeholder="请输入菜单URL"></Input>
                    </Form-item>
                    <Form-item v-if="type == '菜单'" label="菜单权限" prop="permission">
                        <Input v-model="MenuVO.permission" placeholder="请输入菜单权限"></Input>
                    </Form-item>
                </Form>
            </Form>
        </Modal>
    
        <Modal ref="menuModal" v-model="menuModal" title="选择上级菜单" @on-ok="getSelectedNodes">
            <template>
                <Tree ref="tree" :data="baseData"></Tree>
            </template>
        </Modal>
    
    </div>
</template>
<script>
export default {
    data() {
        return {
            type: '菜单',
            self: this,
            totalRecord: 1,
            totalPage: 1,
            pageNo: 1,
            pageSize: 10,
            //     single: {},
            menuName: '',
            cols: [
                {
                    title: '菜单名',
                    key: 'menuName'
                },
                {
                    title: '上级菜单',
                    key: 'parentMenuName'
                },
                {
                    title: '菜单URL',
                    key: 'menuUrl'
                },
                {
                    title: '权限',
                    key: 'permission'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render(row, column, index) {
                        return `<i-button type="primary" size="small" @click="show(${index})">编辑</i-button> <i-button type="error" size="small" @click="confirmMenuDelete(${index})">删除</i-button>`;
                    }
                }
            ],
            baseData: [],
            sourceData: [],
            queryMenuVO: {},
            MenuVO: {
                parentMenuName: '',
                menuId: '',
                menuName: '',
                title: '',
                menuUrl: '',
                permission: ''
            },
            tablesize: 'small',
            modal: false,
            menuModal: false,
            ruleValidate: {
                menuName: [
                    { required: true, message: '菜单名不能为空', trigger: 'blur' }
                ],
                // parentMenuId: [
                //     { required: true, message: '上级菜单不能为空', trigger: 'blur' }
                // ],
                menuUrl: [
                    { required: true, message: '上级菜单不能为空', trigger: 'blur' }
                ],
                permission: [
                    { required: true, message: '菜单权限不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.queryMenu();
        this.$http.post('services/getmenuroot/').then(response => {
            var data = response.data;
            this.baseData = data;
        }, response => {
            this.$Message.error('获取失败, 返回: ' + response);
        })
    },
    methods: {
        queryMenu() {
            this.$http.post("services/menuquery/" + this.pageSize + "/" + this.pageNo, this.queryMenuVO
            ).then(response => {
                var data = response.data;
                var pageVO = data.pageVO;
                this.sourceData = data.resultList;
                this.totalRecord = pageVO.totalRecord;
            }, response => {
                console.log(response);
                this.$Message.error('获取失败, 返回: ' + response.message);
            })
        },
        choose() {
            this.menuModal = true;
        },
        onPageIndexChange(pageindex) {
            this.pageNo = pageindex;
            this.queryMenu();
        },
        onPageSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.queryMenu();
        },
        show(index) {
            if (this.sourceData[index].menuUrl == null) {
                this.type = '目录';
                this.disabled = true;
                this.MenuVO.menuId = this.sourceData[index].menuId;
                this.MenuVO.title = this.sourceData[index].parentMenuName;
                this.MenuVO.menuName = this.sourceData[index].menuName;
                this.MenuVO.menuUrl = this.sourceData[index].menuUrl;
                this.MenuVO.permission = this.sourceData[index].permission;
                this.modal = true;
            } else {
                this.type = '菜单';
                this.disabled = true;
                this.MenuVO.menuId = this.sourceData[index].menuId;
                this.MenuVO.title = this.sourceData[index].parentMenuName;
                this.MenuVO.menuName = this.sourceData[index].menuName;
                this.MenuVO.menuUrl = this.sourceData[index].menuUrl;
                this.MenuVO.permission = this.sourceData[index].permission;
                this.modal = true;
            }
        },
        ok() {
            this.$refs.MenuForm.validate((valid) => {
                if (valid) {
                    if (this.MenuVO.menuId) {
                        this.$http.post("services/menuupdate", this.MenuVO
                        ).then(response => {
                            this.disabled = false;
                            this.$Message.success("修改成功");
                            this.queryMenu();
                        }, response => {
                            this.disabled = false;
                            this.$Message.error("获取失败, 返回: " + response);
                        })
                    } else {
                        this.$http.post('services/menuadd', this.MenuVO
                        ).then(response => {
                            this.$Message.success('保存成功');
                            this.queryMenu();
                        }, response => {
                            this.$Message.error('获取失败, 返回: ' + response);
                        })
                    }
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        addMenu() {
            this.MenuVO.menuId = '';
            this.MenuVO.parentMenuName = '';
            this.MenuVO.menuName = '';
            this.MenuVO.title = '';
            this.MenuVO.menuUrl = '';
            this.MenuVO.permission = '';
            this.modal = true;
        },
        cancel() {
            this.MenuVO.menuId = '';
            this.MenuVO.parentMenuName = '';
            this.MenuVO.menuName = '';
            this.MenuVO.title = '';
            this.MenuVO.menuUrl = '';
            this.MenuVO.permission = '';
        },
        getSelectedNodes() {
            if (this.$refs.tree.getSelectedNodes()[0].title != this.MenuVO.menuName) {
                if (this.$refs.tree.getSelectedNodes()[0]) {
                    this.MenuVO.parentMenuId = this.$refs.tree.getSelectedNodes()[0].menuId;
                    this.MenuVO.title = this.$refs.tree.getSelectedNodes()[0].title;
                } else {
                    this.MenuVO.parentMenuId = null;
                    this.MenuVO.title = null;
                }
            } else {
                this.MenuVO.parentMenuId = null;
                this.MenuVO.title = null;
            }
        },
        parentMenuChange() {
            if (this.MenuVO.menuId.length == 0) {
                this.MenuVO.menuId = '';
                this.MenuVO.menuName = '';
                this.MenuVO.title = '';
                this.MenuVO.menuUrl = '';
                this.MenuVO.permission = '';
            }
        },
        confirmMenuDelete(index) {
            this.$Modal.confirm({
                content: '<p>是否删除数据？</p>',
                onOk: () => {
                    let menuList = [];
                    menuList.push(this.sourceData[index]);
                    this.$http.post("services/menudelete", menuList
                    ).then(response => {
                        this.$Message.success("删除成功");
                        this.queryMenu();
                    }, response => {
                        this.$Message.error("获取失败, 返回: " + response);
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        add() {
            this.menuModal = true;
        }
    }
}
</script>